<template>
  <div>
    <!-- isShowAttrList 
      为true   AttrList显示   disable为false
      为false  AddSetAttr显示   disable为true
      所以传到三级导航组件的数据取反即可
    -->
    <CategorySelector :disabled="!isShowAttrList"></CategorySelector>
    <!-- 自定义事件,接收AttrList组件穿过来的row  $event 接收emits()的的一个参数-->
    <AttrList v-if="isShowAttrList" v-model="isShowAttrList" @updateAttr="attr = $event"></AttrList>
    <AddSetAttr v-else v-model="isShowAttrList" :attr="attr"></AddSetAttr>
  </div>
</template>

<script lang="ts">
export default {
  name: "ProductAttr",
};
</script>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { AttrItem } from "@/api/product/models/attrModel";
import CategorySelector from "@/components/CategorySelector";
import AttrList from "@/views/product/attr/AttrList";
import AddSetAttr from "@/views/product/attr/AddSetAttr";

const isShowAttrList = ref(true);

const attr = reactive<AttrItem>({
  attrName: "",
  attrValueList: [],
});
</script>

<style scoped></style>
